<template>
	<view class="ray-file-picker">
        <!-- v-model 绑定的值，由 props 传入，手动删除会报错 -->
        <uni-file-picker
            ref="files"
            :value="fileValue"
            :return-type="returnType"
            :disabled="disabled"
            :readonly="readonly"
            :limit="limit"
            :mode="mode"
            :list-styles="listStyles"
            :image-styles="imageStyles"
            :file-mediatype="fileMediaType"
            :sizeType="sizeType"
            :sourceType="sourceType"
            :del-icon="delIcon"
            :auto-upload="autoUpload"
            @select="handleSelect"
            @progress="handleProgress"
            @success="handleSuccess"
            @fail="handleFail"
            @delete="handleDelete" />
	</view>
</template>

<script>
    import uniFilePicker from '@/components/uni-file-picker/uni-file-picker.vue'
	export default {
        components: { uniFilePicker },
        model: {
            // 指定 v-model 要绑定的参数叫什么名字，来自于 props 中定义的参数
            prop: 'fileValue',
            // 指定要触发的事件名字，将被用于 $emit
            event: 'change',
        },
        computed: {
            getValue: {
                // 这里的计算属性使用了 getter、setter，可以简化代码
                // 可参见链接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter
                get() {
                    return this.fileValue
                },
                set(val) {
                    console.log('set fileValue', this.fileValue, val)
                    // 触发
                    this.$emit('change', val)
                },
            },
        },
        watch: {
        },
        props: {
            fileValue: {
                type: [Object, Array],
                default() {
                    return [];
                }
            },
            /**
             * 是否自动上传
             */
            autoUpload: {
                type: Boolean,
				default() {
                    return false;
                }
            },
            /**
             * 限制 value 格式，当为 object 时 ，组件只能单选，且会覆盖
             * array/object
             */
            returnType: {
                type: [String],
                default() {
                    return 'array';
                }
            },
            limit: {
                type: Number,
                default() {
                    return 1;
                }
            },
            /**
             * 是否显示删除按钮
             */
			delIcon: {
				type: Boolean,
				default() {
                    return true;
                }
			},
            /**
             * 组件只读，不可选择，不显示进度，不显示删除按钮
             */
			readonly: {
				type: Boolean,
				default() {
                    return false;
                }
			},
            /**
             * 组件禁用
             */
			disabled: {
				type: Boolean,
				default() {
                    return false;
                }
			},
            /**
             * 选择文件后的文件列表样式list/grid
             */
            mode: {
				type: String,
				default() {
                    return 'grid';
                }
			},
            /**
             * mode:list 时的样式
             */
            listStyles: {
                type: Object,
                default() {
                    return {
                        "borderStyle": {
                            // 边框颜色
                            "color": "#eee",
                            // 边框宽度
                            "width": "1px",
                            // 边框样式
                            "style": "solid",
                            // 边框圆角，不支持百分比
                            "radius": "5px"
                        },
                        // 是否显示边框
                        "border": false,
                        // 是否显示分隔线
                        "dividline": true
                    }
                }
            },
            /**
             * mode:grid 时的样式
             */
            imageStyles: {
                type: Object,
                default() {
                    return {
                        // 边框高度
                        "height": 86,
                        // 边框宽度
                        "width": 86,
                        // 如果为 Boolean 值，可以控制边框显示与否
                        "border": {
                            // 边框颜色
                            "color": "#eee",
                            // 边框宽度
                            "width": "1px",
                            // 边框样式
                            "style": "solid",
                            // 边框圆角，支持百分比
                            "radius": "5px"
                        }
                    }
                }
            },
            /**
             * 选择文件类型,all 只支持 H5 和微信小程序平台image/video/all
             */
            fileMediaType: {
                type: String,
				default() {
                    return 'image';
                }
            },
            /**
             * 选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 file-mediatype 属性而不同
             */
            fileExtname: {
                type: [Array, String],
                default() {
                    return '';
                }
            },
            /**
             * original 原图，compressed 压缩图，默认二者都有
             */
            sizeType: {
                type: Array,
                default() {
                    return [];
                }
            },
            /**
             * album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
             */
            sourceType: {
                type: Array,
                default() {
                    return [];
                }
            },
            
            /**
             * 上传文件时附带的额外参数
             */
            params: {
                type: Object,
                default() {
                    return {};
                }
            },
            
            
            
		},
		data() {
			return {
                
			}
		},
        created() {
            
        },
		methods: {
            handleSelect(event) {
                console.log('handleSelect', event)
                console.log('handleSelect', this.fileValue)
                if (!this.autoUpload) {
                    if (!event.tempFiles || event.tempFiles.length == 0) {
                        return;
                    }
                    if (this.returnType === 'object') {
                        Object.assign(this.fileValue, event.tempFiles[0]);
                    } else {
                        this.fileValue.push(event.tempFiles[0]);
                    }
                    this.$emit('change', this.fileValue)
                }
            },
            handleProgress(event) {
                console.log('handleProgress', event)
            },
            handleSuccess(event) {
                console.log('handleSuccess', event)
            },
            handleFail(event) {
                console.log('handleFail', event)
            },
            handleDelete(event) {
                console.log('handleDelete', event)
                console.log('handleDelete', this.fileValue)
                
                // 特殊需求时，可以重写此方法
                if ('object' == this.returnType) {
                    for (let key in this.fileValue) {
                        delete this.fileValue[key];
                    }
                } else {
                    // this.fileValue = this.fileValue.filter(item => item.path !== event.tempFile.path);
                    let index = this.fileValue.findIndex(item => item.path === event.tempFile.path);
                    if (index !== -1) {
                        this.fileValue.splice(index, 1);
                    }
                }
                console.log('11111', this.fileValue)
                this.$emit('change', this.fileValue)
            },
		},
	}
</script>

<style lang="scss" scoped>
    /deep/ .uni-popup {
        z-index: 999;
    }
    .ray-file-picker {
        display: initial;
        
    }
</style>
